<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" charset="UTF-8" src="/static/jquery.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

<div class="demo">
    <div id="uploadfile">
        <!--用来存放文件信息-->
        <div id="the_2655" class="uploader-list"></div>
        <div class="form-group form-inline">
            <input type="file" id="file" multiple>
            <button id="btnFile6" class="btn btn-default" style="padding: 5px 10px;border-radius: 3px;">开始上传</button>
        </div>

        <div class="result"></div>
    </div>
</div>

<form action="hello" enctype="multipart/form-data" method="post">
    <input type="file" name="image" /> <br>
    <input type="submit" value="上传" />
</form>
</body>
<script>
    //---------------------------


    //-----------------------------
    var upload_instance = new Upload();
    $("#btnFile6").click(function () {
        var fileForm = document.getElementById("file");
        upload_instance.addFileAndSend(fileForm);
    });
    // upstartBtn.onclick = function(){
    //     alert(1)
    //     // upload_instance.addFileAndSend(fileForm);
    //
    // }
    //
    // stopBtn.onclick = function(){
    //     upload_instance.stop();
    // }
    //
    // startBtn.onclick = function(){
    //     upload_instance.start();
    // }

    function Upload(){
        var LENGTH = 1024 * 1024;
        var start = 0;
        var end = start + LENGTH;
        var blob;
        var blob_num = 1;
        var is_stop = 0;
        var file = null;
        var md5filename = '';
        var xhr = new XMLHttpRequest();
        var form_data = new FormData();


        //对外方法，传入文件对象
        this.addFileAndSend = function(that){
            file = that.files[0];
            blob = cutFile(file);
            sendFile(blob,file);
            blob_num += 1;
        }
        //停止文件上传
        this.stop = function(){
            xhr.abort();
            is_stop = 1;
        }

        this.start = function(){
            sendFile(blob,file);
            is_stop = 0;
        }

        //切割文件
        function cutFile(file){
            var file_blob = file.slice(start,end);
            start = end;
            end = start + LENGTH;
            return file_blob;
        };
        //发送文件
        function sendFile(blob,file){
            var total_blob_num = Math.ceil(file.size / LENGTH);
            form_data.append('file',blob);
            form_data.append('blob_num',blob_num);
            form_data.append('total_blob_num',total_blob_num);
            form_data.append('md5_file_name',md5filename);
            form_data.append('file_name',file.name);
            xhr.open('POST','hello',false);

            xhr.onreadystatechange = function () {

                var progress;
                // var progressObj = document.getElementById('finish');
                if(total_blob_num == 1){
                    progress = '100%';
                }else{
                    progress = (Math.min(100,(blob_num/total_blob_num)* 100 )).toFixed(2) +'%';
                }
                console.log('progress-----'+progress);
                // progressObj.style.width = progress;
                // rate.innerHTML = progress;

                var t = setTimeout(function(){
                    if(start < file.size && is_stop === 0){
                        blob = cutFile(file);
                        sendFile(blob,file);
                        blob_num += 1;
                    }else{

                        //setTimeout(t);
                    }
                },1000);
            }

            xhr.send(form_data);
        }
    }

</script>
</html>